import React from 'react'
import '../style/search.css'

class Search extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            history:["1111","2222","3333","4444","5555"],
            isShow:false,
            selIndex:0
        }
    }

    render() {
        return (
            <div>
                <input  type="text"
                        onFocus={()=>{
                            this.setState({
                                isShow:true
                           })
                        }}
                        onBlur={()=>{
                            this.setState({
                                isShow:false
                           })
                        }}
                        onKeyDown={event =>{
                            console.log(event.keyCode)
                            if(event.keyCode === 40){
                                this.state.selIndex++
                                console.log(this.state.selIndex)
                                if(this.state.selIndex >= this.state.history.length){
                                    this.setState({
                                        selIndex:0
                                    })
                                    return
                                }
                                this.setState({
                                    selIndex:this.state.selIndex
                                })
                            }else if(event.keyCode === 38){
                                this.state.selIndex--
                                if (this.state.selIndex < 0) {
                                    this.setState({
                                        selIndex:this.state.history.length-1
                                    })
                                    return
                                }
                                this.setState({
                                    selIndex:this.state.selIndex
                                })
                            }
                            var temp = this.state.history[this.state.selIndex]
                            this.setState({
                                text:temp
                            })
                        }}
                />
                <div className={this.state.isShow ? 'history_active' : 'history_hidden'}>
                        {
                            this.state.history.map((ele,index)=>{
                            return <p className={this.state.selIndex === index ? 'history_text' : ''}>{ele}</p>
                            })
                        }
                </div>
                
            </div>
        )
    }
}
export default Search
